<template>
  <div class="section1">
    <div class="left">
      <div class="item">
        <h3 class="tit">研发创新></h3>
        <p class="text">宇喜工具集<span class="span-l">编码器</span></p>
        <p class="text">宇喜npm工具集</p>
      </div>
      <div class="item">
        <h3 class="tit">行业></h3>
        <p class="text">教育/培训<span class="span-l">制造业</span></p>
        <p class="text">软件/IT服务 <span>医药</span></p>
      </div>
      <div class="item">
        <h3 class="tit">服务></h3>
        <p class="text">解决方案</p>
        <p class="text">云服务3DExperience</p>
      </div>
      <div class="item">
        <h3 class="tit">体验馆></h3>
        <p class="text">三维可视化交互</p>
        <p class="text">产品使用</p>
      </div>
    </div>
    <el-carousel indicator-position="outside" class="center" height="570px">
      <el-carousel-item v-for="item in 4" :key="item">
        <h3>{{ item }}</h3>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  // 定义属性
  data() {
    return {}
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {}
}
</script>

<style lang="less" scoped>
.section1 {
  display: flex;
  margin: 0 auto;
  background-color: tomato;
  width: 62.5%;
  padding: 10px 0 25px;
  /deep/ .left {
    width: 214px;
    height: 597px;
    background-color: yellow;
    padding: 20px 0 0 15px;
    .item {
      margin-bottom: 30px;
      .tit {
        cursor: pointer;
        font-size: 16px;
        color: #da251d;
        line-height: 30px;
      }
      .text {
        cursor: pointer;
        font-size: 14px;
        color: #666666;
        line-height: 30px;
      }
      .span-l {
        margin-left: 2rem;
      }
    }
  }
  //   走马灯
  /deep/ .center {
    width: 726px;
  }
}
</style>
